<script setup>
import { cardBgColor, wallType } from '@/utils/data'
import { ref, getCurrentInstance } from "vue"
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/user'
import { addMessage, uploadImg } from '@/api/wall'

const emit = defineEmits(['closeModal', 'getWallList'])
const route = useRoute()
const userStore = useUserStore()
// 封装的全局消息提示
const { proxy } = getCurrentInstance()
const $YiKeMessage = proxy.$YiKeMessage

// 选择留言板的颜色
const colorIndex = ref(0)
const changeColor = (index) => {
    colorIndex.value = index
}
// 选择小标签
const smallTagIndex = ref(1)
const chooseSamllTag = (index) => {
    smallTagIndex.value = index
}


// 添加留言
const message = ref('')
const name = ref('')
const imgurl = ref('')
const url = ref('')
// 图片提交
const submitMessage = () => {
    const data = ref({
        type: route.query.id,
        message: message.value,
        name: name.value,
        userId: userStore.ip,
        moment: dayjs().format('YYYY/MM/DD HH:mm'),
        label: smallTagIndex.value,
        color: route.query.id == 0 ? colorIndex.value : 5,
        imgurl: imgurl.value
    })
    if (imgurl.value == '' && route.query.id == 1) {
        // 提示上传图片
        $YiKeMessage({ message: "请上传你的图片哦", type: 'warning' })
        return
    }
    if (message.value == '' && route.query.id == 0) {
        // 提示要输入内容
        $YiKeMessage({ message: "请输入你的留言哦", type: 'warning' })
        return
    }
    if (name.value == '') {
        data.value.name = '匿名'
    }
    if (route.query.id == 1) {
        let file = document.getElementById('file')
        if (file.files.length > 0) {
            let formData = new FormData()
            formData.append('file', file.files[0])
            // 先提交图片
            uploadImg(formData).then(res => {
                data.value.imgurl = res.imgurl
                addMessage(data.value).then(result => {
                    $YiKeMessage({ message: result.message, type: 'success' })
                    emit('getWallList')
                    closeModal()
                })
            })
        }
    } else {
        addMessage(data.value).then(result => {
            $YiKeMessage({ message: result.message, type: 'success' })
            emit('getWallList')
            closeModal()
        })
    }
}

// 显示图片
const showPic = () => {
    let img = document.getElementById('file').files[0]
    let reader = new FileReader()
    reader.readAsDataURL(img)
    reader.onload = (result) => {
        imgurl.value = result.target.result
    }
}



// 关闭弹窗
const closeModal = () => {
    colorIndex.value = 0
    smallTagIndex.value = 0
    message.value = ''
    name.value = ''
    imgurl.value = ''
    emit('closeModal')
}

</script>

<template>
    <div class="modal-body">
        <div class="upload-pic" v-if="route.query.id == 1">
            <input type="file" name="file" id="file" multiple @change="showPic"
                :class="{ 'upload-btn': imgurl == '', 'newUpload-btn': imgurl != '' }">
            <div :class="{ 'upload-btn-mask': imgurl == '', 'newUpload': imgurl != '' }">
                <span class="iconfont" :class="{ 'icon-tianjia': imgurl == '', 'icon-xiugai': imgurl != '' }"></span>
            </div>
            <div class="pic-div" v-if="imgurl != ''">
                <img :src="imgurl" alt="">
            </div>
        </div>
        <div class="color-list" v-else>
            <div class="color" :class="{ activeColor: colorIndex === index }" @click="changeColor(index)"
                v-for="c, index in cardBgColor" :style="{ background: c }"></div>
        </div>
        <div class="card-panel" :style="{ background: route.query.id == 0 ? cardBgColor[colorIndex] : cardBgColor[5] }">
            <textarea placeholder="留言..." maxlength="144" v-model="message"></textarea>
            <input type="text" placeholder="签名" v-model="name">
        </div>
        <div class="chooseTag">
            <div class="chooseTag-title">选择标签</div>
            <div class="tabs">
                <div class="btn" :class="{ activeSmallTag: smallTagIndex === index + 1 }" @click="chooseSamllTag(index + 1)"
                    v-for="tag, index in wallType[route.query.id].tag">{{ tag }}
                </div>
            </div>
        </div>
        <div class="without">
            <div class="without-duty">免责声明</div>
            <p>
                一刻时光，为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容： <br />
                1、反对宪法所确定的基本原则的； <br />
                2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家 统一的； <br />
                3、损害国家荣誉和利益的； <br />
                4、煽动民族仇恨、民族歧视，破坏民族团结的； <br />
                5、破坏国家宗教政策，宣扬邪教和封建迷信的； <br />
                6、散布谣言，扰乱社会秩序，破坏社会稳定的； <br />
                7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的； <br />
                8、侮辱或者诽谤他人，侵害他人合法权益的； <br />
                9、含有法律、行政法规禁止的其他内容的信息。 <br />
            </p>
        </div>
        <div class="button">
            <div class="giveUp" @click="closeModal">放弃</div>
            <div class="submit" @click="submitMessage">确定</div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.modal-body {
    margin-top: 22px;

    .upload-pic {
        position: relative;
        min-height: 74px;

        .upload-btn {
            display: inline-block;
            width: 74px;
            height: 74px;
            border: none;
            opacity: 0;
            z-index: 10;
            cursor: pointer;
            position: absolute;
            top: 0px;
            border-radius: 50%;
        }

        .newUpload-btn {
            opacity: 0;
            z-index: 10;
            cursor: pointer;
            position: absolute;
            border-radius: 50%;
            top: 12px;
            left: 12px;
            height: 40px;
            width: 40px;
        }

        .newUpload {
            position: absolute;
            top: 12px;
            left: 12px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: rgba(0, 0, 0, .3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            cursor: pointer;
        }

        .upload-btn-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 74px;
            height: 74px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #949494;
            border-radius: 50%;
            color: #949494;
            cursor: pointer;

            .icon-tianjia {
                font-size: 24px;
                color: #202020;
            }
        }

        .pic-div {

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .color-list {
        display: flex;

        .color {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            cursor: pointer;
        }

        .activeColor {
            border: 1px solid #3b73f0;
        }
    }

    .card-panel {
        width: 320px;
        height: 240px;
        padding: 12px;
        margin-top: 8px;
        position: relative;

        textarea {
            background: none;
            width: 100%;
            height: 100%;
            border: none;
            padding: 8px;
            box-sizing: border-box;
            outline: none;
            resize: none;
            font-size: 15px;
        }

        input {
            position: absolute;
            bottom: 12px;
            left: 0;
            right: 0;
            margin: auto;
            width: 296px;
            height: 32px;
            line-height: 32px;
            border: 1px solid hsla(0, 0%, 100%, .6);
            outline: none;
            text-align: right;
            font-weight: 600;
            background: none;
            font-size: 16px;
            padding: 0 8px;
            box-sizing: border-box;

        }
    }

    .chooseTag {
        margin-top: 24px;
        font-size: 14px;

        .chooseTag-title {
            color: #202020;
            font-weight: 600;
        }

        .tabs {
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;

            .btn {
                color: #5B5B5B;
                padding: 0 10px;
                margin: 8px 2px;
                cursor: pointer;
            }

            .activeSmallTag {
                background: #EBEBEB;
                border-radius: 14px;
                color: #202020;
                font-weight: 600;
            }
        }
    }

    .without {
        margin-top: 30px;

        .without-duty {
            color: #202020;
            font-weight: 600;
        }

        p {
            margin-top: 12px;
            font-size: 12px;
            color: #949494;
        }
    }

    .button {
        position: absolute;
        bottom: 52px;
        left: 0;
        right: 0;
        padding: 0 20px;
        width: 100%;
        height: 88px;
        background: hsla(0, 0%, 100%, .8);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .giveUp,
        .submit {
            width: 100px;
            height: 48px;
            line-height: 48px;
            border: 1px solid rgba(32, 32, 32, 1);
            border-radius: 24px;
            text-align: center;
            cursor: pointer;
        }

        .submit {
            width: 200px;
            background-color: #202020;
            color: #fff;
        }
    }

}
</style>